<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Summernote</title>
		<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
		<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
		<script type="application/javascript">
			$jq3 = jQuery.noConflict();
			console.log("$jq3的version:" + $jq3().jquery);
		</script>
		<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="${_root}/resources/t2/stylesheets/theme.css">
	    <link rel="stylesheet" type="text/css" href="${_root}/resources/t2/stylesheets/premium.css">
		<link rel="stylesheet" type="text/css" href="${_root}/resources/css/jquery.tmailsilder.v2.css" />
		<link rel="stylesheet" href="${_root}/resources/css/crobox.css" />
		<link rel="stylesheet" href="${_root}/resources/t2/lib/font-awesome/css/font-awesome.css">
		<!--文件上传插件-->
		<!--  表单验证css样式-->
		<link rel="stylesheet" href="${_root}/resources/css/formValidation.min.css" />
		<!-- bootstrap 开关控件-->
		<link rel="stylesheet"  type="text/css" href="${_root}/resources/css/bootstrap-switch.min.css"/>
		<!--文件上传插件-->
		<link rel="stylesheet" href="${_root}/resources/css/fileinput.min.css" />		
		<!-- Other plugins stylesheets for this demo page, unrelated to BootstrapMenu -->
		<link rel="stylesheet" href="${_root}/resources/css/toastr.css">
		<link rel="stylesheet" href="${_root}/resources/css/highlight-8.6.default.min.css">

		<style>
			/*表示导航的一项*/
			
			.nav_item {}
			/*表示导航每一项的内容面板*/
			
			.nav_item_content {}
			
			.box {
				margin: 10px auto;
				display: block;
				position: relative;
				border: 1px solid #efefef;
			}
			
		</style>
	</head>

	<body class="theme-blue">
		<%@include file="/WEB-INF/jsp/common/top.jsp" %>
		<div class="sidebar-nav">
			<ul class="nav nav-pills nav-stacked">
				<li role="presentation"  ><a href="${_root}/jsp/person">个人信息</a></li>
			  <li role="presentation" ><a href="${_root}/article/uparticle">上传文章</a></li>
			  <li role="presentation"><a href="${_root}/jsp/collection">收藏的文章</a></li>
			  <li role="presentation" class="active"><a href="${_root}/jsp/articlemanager">文章管理</a></li>
			</ul>
		</div>
		<div class="content container-fluid" style="margin-top:50px">
			<div class="header">

				<h1 class="page-title">个人文章列表</h1>
				<ul class="breadcrumb">
					<li>
						<a href="index.html">个人中心</a>
					</li>
					<li class="active">文章列表</li>
				</ul>

			</div>
			<div class="row">
				<div class="col-lg-12">
					<table id="showtable" class="table">
						<thead>
							<tr>
								<th>文章标题</th>
								<th>文章类型</th>
								<th>文章简介</th>
								<th>收藏数</th>
								<th>评论数</th>
								<th>发表日期</th>
								<th>文章状态</th>
							</tr>
						</thead>
						<tbody>
						</tbody>
					</table>
				<div class="row">
					<div class="col-sm-9 main-content">
						<div id="blog-posts">
						</div>
						<div id="pager" class="center-block">
							<ul class="pagination">
							</ul>
						</div>	
					</div>
				</div>
			</div>
		<!-- Modal -->

<!-- Modal -->
<div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">文章详情</h4>
      </div>
      <div class="modal-body" id="article-detail">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal -->
<div class="modal small fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h3 id="myModalLabel">删除消息</h3>
			</div>
			<div class="modal-body">
				<p class="error-text"><i class="fa fa-warning modal-icon"></i>你确认要删除该文章吗？<br>该操作无法撤销</p>
			</div>
			<div class="modal-footer">
				<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">取消</button>
				<button class="btn btn-danger"  id='deleteUser'>删除</button>
			</div>
		</div>
	</div>
</div>
	<%@include file="/WEB-INF/jsp/common/buttom_resources.jsp"%>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.js"></script>
	<!--以上为使用jq3的插件，以下为使用低版本jquery-->
	<script type="text/javascript" src="${_root}/resources/js/jquery.tmailsilder.v2.js"></script>
	<script type="application/javascript" src="${_root}/resources/js/cropbox.js"></script>
	<script type="text/javascript" src="${_root}/resources/js/jquery-2.1.1.min.js" ></script>
	<!--右键功能-->
	<script type="text/javascript" src="${_root}/resources/js/BootstrapMenu.min.js" ></script>
	<script type="text/javascript" src="${_root}/resources/js/toastr.js" ></script>
	<script type="text/javascript" src="${_root}/resources/js/highlight-8.6.default.min.js" ></script>
	<script type="text/javascript" src="${_root}/resources/js/scale.fix.js" ></script>
	<script type="text/javascript" src="${_root}/resources/js/jsp/articlemanager.js"></script>
    <script type="text/javascript">
		//全局数据
		const globalData={
			url:"${_root}/article/userArticle",
			current:1,//当前页
			size:10,//每页大小
			totals:0,//总记录数
			pages:1,//总页数
		};
			$(function(){
				//定义table显示数据的模板
				const template="<tr class='demo3TableRow' data-row-id='\${articleID}'>"+
				"<td>\${title}</td>"+
				"<td>\${typeName}</td>"+
				"<td>\${introduction}</td>"+
				"<td>\${collectionCount}</td>"+
				"<td>\${commentCount}</td>"+
				"<td>\${tdate}</td>"+
				"<td>\${qualified}</td>"+
				"</tr>";
				$jq3.template("list",template);//注册模板
				getServerData(globalData.url,globalData.current,globalData.size);//获取服务器数据
			});

    /* A centralized container of the table data. You could hold the
     * row-specific data in a data-whatever-info="" attribute in each
     * row, you decide what fetchElementData() does!
     */
    var demo3Rows = {
      '1': { name: 'First row', description: 'Lorem ipsum dolor sit amet' },
      '2': { name: 'Second row', description: 'Nemo enim ipsam voluptatem quia voluptas' },
      '3': { name: 'Third row', description: 'Ut enim ad minima veniam' }
    };

    var menu = new BootstrapMenu('.demo3TableRow', {
      /* a function to know which row was the context menu opened on,
       * given the selected DOM element. When this function is defined,
       * every user-defined action callback receives its return value as
       * an argument. */
      fetchElementData: function($rowElem) {
        var rowId = $rowElem.data('rowId');
        return rowId;
      },
      actions: [{
        name: '查看文章详情',
        onClick: function(rowId) {
        	$jq3('#myModal').modal('show');
        	$.getJSON("/cms/article/showContent",{"articleID":rowId},function(result){
        		$("#article-detail").html("");
        		$("#article-detail").html(result.data.content);
        	})
        }
      }, {
        name: '删除文章',
        onClick: function(rowId) {
        	$jq3('#deleteModal').modal('show');
			//为删除按钮添加事件处理,
			$('#deleteUser').bind('click',function(){
				$.getJSON("/cms/article/deleteUserArticle",{'articleID':rowId},function(result){
					if(result.data.reply==1){
						$jq3('#deleteModal').modal('hide');//隐藏模态框
						console.log('删除成功');
						getServerData(globalData.url,globalData.current,globalData.size);//刷新页面数据
					}else{
						$jq3('#deleteModal').modal('hide');//隐藏模态框
						console.log('未知错误');
					}
				})
			});
        }
      }]
    });
    </script>
	</body>